<template>
  <div class="wrapper">
    <ul
      v-if="show"
      class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item">
        <span v-if="item.formType == 'date'">
          {{ item.name +'&nbsp;“' + item.value[0] + '-' + item.value[1] + '”' }}
        </span>
        <span v-else-if="item.formType === 'datetime'">
          {{ item.name +'&nbsp;“' + item.value[0] + '-' + item.value[1] + '”' }}
        </span>
        <span v-else-if="item.formType === 'business_type'">
          {{ item.name +'&nbsp;“' + getTypesName(item) + getStatusName(item) + '”' }}
        </span>
        <span v-else-if="item.formType === 'map_address'">
          {{ `${item.name} ${item.value.state} ${item.value.city} ${item.value.area}` }}
        </span>
        <span v-else-if="item.formType === 'checkStatus'">
          {{ item.name +'&nbsp;“' + optionsNames[item.condition]+ '”'+'&nbsp;'+ getCheckName(item) }}
        </span>
        <span v-else-if="item.formType === 'dealStatus'">
          {{ item.name +'&nbsp;“' + optionsNames[item.condition]+ '”'+'&nbsp;'+ getDealStatus(item.value) }}
        </span>
        <span v-else-if="item.formType === 'state_cause'">
          {{ item.name +'&nbsp;“' + optionsNames[item.condition]+ '”'+'&nbsp;'+ getJxcExamineName(item.value) }}
        </span>
        <span v-else-if="item.formType === 'select'">
          {{ item.name +'&nbsp;“' + optionsNames[item.condition]+ '”'+'&nbsp;'+ getSelectShow(item) }}
        </span>
        <span v-else-if="item.formType === 'user' && item.arr">
          {{ item.name +'&nbsp;' + optionsNames[item.condition] + '“' + item.arr[0].realname + '”' }}
        </span>
        <span v-else-if="item.formType === 'structure' && item.arr">
          {{ item.name +'&nbsp;' + optionsNames[item.condition] + '“' + item.arr[0].name + '”' }}
        </span>
        <span v-else-if="item.formType === 'category' && item.value">
          {{ item.name +'&nbsp;“' + item.valueContent + '”' }}
        </span>
        <span v-else>
          {{ item.name + '&nbsp;' + optionsNames[item.condition] + '“' + item.value + '”' }}
        </span>
        <i
          class="el-icon-close icon"
          @click="handleDelete(index)"/>
      </li>
    </ul>
  </div>
</template>

<script>
import jxcExamineLib from '../../jxcExamineStatus'
import { isObject } from '@/utils/types'

export default {
  name: 'FilterContent',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: true,
      // 获取条件名称
      optionsNames: {
        is: '等于',
        in: '等于',
        isNot: '不等于',
        contains: '包含',
        notContains: '不包含',
        startWith: '开始于',
        endWith: '结束于',
        isNull: '为空',
        isNotNull: '不为空',
        eq: '等于',
        neq: '不等于',
        gt: '大于',
        egt: '大于等于',
        lt: '小于',
        elt: '小于等于',
        checkbox_in: '等于',
        checkbox_not: '不等于'
      }
    }
  },
  watch: {
    // list: {
    //   handler(val) {
    //     this.show = false
    //     this.$nextTick(() => {
    //       this.show = true
    //     })
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  methods: {
    /**
     * 删除高级筛选条件
     * @param index
     */
    handleDelete(index) {
      this.$emit('delete', index)
    },

    /**
     * 商机组展示名称
     */
    getTypesName(data) {
      if (data.typeId) {
        const obj = data.typeOption.find(item => {
          return item.typeId === data.typeId
        })
        return obj.name || ''
      }
      return ''
    },
    getCheckName(data) {
      let value = ''
      data.setting.forEach(item => {
        if (item.value === data.value) {
          value = item.name
          return
        }
      })
      return value
    },
    getJxcExamineName(value) {
      let str = ''
      if (value instanceof Array) {
        str = value.map(v => jxcExamineLib[v].label || '')
        return str.join(',')
      } else {
        return jxcExamineLib[value].label || ''
      }
    },

    /**
     * 商机阶段展示名称
     */
    getStatusName(data) {
      if (data.statusId) {
        const obj = data.statusOption.find(item => {
          return item.statusId === data.statusId
        })
        if (obj.name) {
          return '-' + obj.name
        }
        return ''
      }
      return ''
    },

    getSelectShow(item) {
      console.log(item)
      let str = ''
      if (item.value instanceof Array) {
        const arr = []
        item.value.forEach(v => {
          arr.push(this.getSelectedLabel(v, item.setting))
        })
        str = arr.join(',')
      } else {
        str = this.getSelectedLabel(item.value, item.setting)
      }
      return str
    },
    getSelectedLabel(val, setting) {
      if (isObject(val)) {
        return setting.find(o => o === val)
      } else {
        const findRes = setting.find(o => {
          if (o.hasOwnProperty('label')) {
            return o.value === val
          } else {
            return o === val
          }
        })
        return findRes ? (findRes.label || findRes || '') : ''
      }
    },

    /**
     * 成交状态名称
     */
    getDealStatus(type) {
      if (type == 0) {
        return '未成交'
      } else if (type == 1) {
        return '已成交'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
@mixin left() {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 100%;
  min-height: 50px;
  background: white;
  border-top: 1px solid #e1e1e1;
  font-size: 13px;
  overflow-x: scroll;
  color: #aaa;
  @include left;
  .list {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 10px;
    flex-shrink: 0;
    @include left;
    .list-item {
      height: 30px;
      padding: 0 10px;
      margin: 10px 15px 0 0;
      border: 1px solid #e1e1e1;
      border-radius: 3px;
      flex-shrink: 0;
      @include center;
      .icon {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
